<template>
<div>
  <el-radio-group v-model="radio" class="radio-group" :disabled="disabled" v-show="show">
    <template v-for ="(item,index) in items">
      <el-radio v-if="item==='year'" :key="index" :label="year" border>{{byyear}}</el-radio>     
      <el-radio v-if="item==='month'" :key="index" :label="month" border>{{bymonth}}</el-radio>
      <el-radio v-if="item==='day'" :key="index" :label="day" border>{{byday}}</el-radio>
      <el-radio v-if="item==='datetime'" :key="index" :label="datetime" border>{{bydatetime}}</el-radio>
    </template>
  </el-radio-group>
  <div class="radio-datepicker">
  <el-date-picker v-show="radio === 'month'"
                  v-model="start"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="setstartDateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'month' && isrange===true">{{this.rangeSeparator}}</span>
  <el-date-picker v-show="radio === 'month' && isrange===true"
                  v-model="end"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="setendDateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>

  <el-date-picker v-show="radio === 'year'"
                  v-model="start"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  @change="setstartDateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'year' && isrange===true">{{this.rangeSeparator}}</span>
  <el-date-picker v-show="radio === 'year' && isrange===true"
                  v-model="end"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  @change="setendDateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>

  <el-date-picker v-show="radio === 'day'"
                  v-model="start"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="setstartDateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'day' && isrange===true">{{this.rangeSeparator}}</span>
  <el-date-picker v-show="radio === 'day' && isrange===true"
                  v-model="end"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="setendDateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>

    <el-date-picker v-show="radio === 'datetime'"
                  v-model="start"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00','00:00:00']"
                  @change="setstartDateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  <span v-if="radio === 'datetime' && isrange===true">{{this.rangeSeparator}}</span>
  <el-date-picker v-show="radio === 'datetime' && isrange===true"
                  v-model="end"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00','00:00:00']"
                  @change="setendDateFormat"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  :editable="false">
  </el-date-picker>
  </div>
</div>
</template>

<style lang="scss">
  .radio-group {
    float: left;
    vertical-align: middle;
    el-radio, .el-radio__label{
      font-size: 12px;
      vertical-align: middle
    }
  }
  .radio-datepicker {
    float: right;
    vertical-align: middle;
    .el-date-editor.el-input, .el-date-editor.el-input__inner, {
      width: 165px;
      margin-left: 2px;
      margin-right: 0px;  
      vertical-align: middle
    }
  }
</style>

<script>
import { parseTime } from '@/utils/index'
export default {
  name: 'RadioDatepicker',
  data() {
    return {
      year: 'year',
      month: 'month',
      day: 'day',
      datetime: 'datetime',
      byyear: this.$t('datePicker.byyear'),
      bymonth: this.$t('datePicker.bymonth'),
      byday: this.$t('datePicker.byday'),
      bydatetime: this.$t('datePicker.bydatetime'),
      radio: '',
      start: new Date(),
      end: new Date(),
      lastDayValue: [new Date(), new Date()],
      lastMonthValue: [new Date(), new Date()],
      lastYearValue: [new Date(), new Date()],
      lastDateTimeValue: [new Date(), new Date()],
      radioType: ['datetime', 'day', 'month', 'year'],
      radioDateFormat: ['{y}-{m}-{d} {h}:{i}:{s}', '{y}-{m}-{d}', '{y}-{m}', '{y}'],
      pickerOptions: {
        disabledDate(value) {
          const today = new Date()
          return value >= today
        }
      }
    }
  },
  props: {
    // 用于修改当前控件的值
    value: {
      type: Object
    },
    items: {
      type: Array,
      required: true
    },
    // 是否为开始-结束日期对
    isrange: {
      type: Boolean,
      required: true,
      default: function() {
        return false
      }
    },
    rangeSeparator: {
      type: String,
      default: function() {
        return '-'
      }
    },
    disabled: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    show: {
      type: Boolean,
      default: function() {
        return true
      }
    }
  },
  created() {
    if (this.value) {
      this.radio = this.value.radio
      this.start = this.value.start
      this.end = this.value.end
      this.lastDateTimeValue = [this.start, this.end]
      this.lastDayValue = [this.start, this.end]
      this.lastMonthValue = [this.start, this.end]
      this.lastYearValue = [this.start, this.end]
    }

    // 如果不需要开始-结束日期，结束日期置为空
    if (!(this.isrange === true)) {
      this.end = ''
    }
    this.staticformatIt(this.radio)
  },
  watch: {
    value: {
      handler: function(value) { // 格式化时间
        this.radio = value.radio
        this.start = new Date(value.start)
        this.end = new Date(value.end)
      },
      deep: true
    },
    radio(value) {
      this.setDateToLastVal(value)
      this.staticformatIt(value)
    }
  },
  methods: {
    setstartDateFormat(value) {
      this.start = value
      this.setLastStartVal(this.radio, value)
      this.staticformatIt(this.radio)
    },
    setendDateFormat(value) {
      this.end = value
      this.setLastEndVal(this.radio, value)
      this.staticformatIt(this.radio)
    },
    staticformatIt(value) {
      let start = this.start
      let end = this.end
      const format = this.radioDateFormat[this.radioType.indexOf(value)]

      start = parseTime(this.start, format)

      end = parseTime(this.end, format)

      const para = {
        'radio': value,
        'start': start,
        'end': end
      }
      this.$emit('input', para)
    },
    setLastStartVal(radio, value) {
      if (radio === 'datetime') {
        this.lastDateTimeValue[0] = value
      }
      if (radio === 'day') {
        this.lastDayValue[0] = value
      }
      if (radio === 'month') {
        this.lastMonthValue[0] = value
      }
      if (radio === 'year') {
        this.lastYearValue[0] = value
      }
    },
    setLastEndVal(radio, value) {
      if (radio === 'datetime') {
        this.lastDateTimeValue[1] = value
      }
      if (radio === 'day') {
        this.lastDayValue[1] = value
      }
      if (radio === 'month') {
        this.lastMonthValue[1] = value
      }
      if (radio === 'year') {
        this.lastYearValue[1] = value
      }
    },
    setDateToLastVal(radio) {
      let start = new Date()
      let end = new Date()
      if (radio === 'datetime') {
        start = this.lastDateTimeValue[0]
        end = this.lastDateTimeValue[1]
      }
      if (radio === 'day') {
        start = this.lastDayValue[0]
        end = this.lastDayValue[1]
      }
      if (radio === 'month') {
        start = this.lastMonthValue[0]
        end = this.lastMonthValue[1]
      }
      if (radio === 'year') {
        start = this.lastYearValue[0]
        end = this.lastYearValue[1]
      }
      this.start = start
      this.end = end
    }
  }
}
</script>